<template>
  <BasicModal v-bind="$attrs"  @ok="closeModal" @register="registerModal" destroyOnClose title="BOM树" :width="1024" :height="600">
    <!-- <a-spin :spinning="spinning">
    <a-alert
      message="Alert message title"
      description="Further details about the context of this alert."
    ></a-alert>
  </a-spin> -->
    <div style="display: flex; justify-content: space-between">
      <div></div>
      <a-button style="margin-bottom: 10px;" type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
    </div>
    <!-- <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" :replaceFields="replaceFields" :tree-data="treeData">
      <template v-slot:title="{ data }"
        ><div style="display: flex; justify-content: space-between;width: 500px;"
          ><span>{{ data.str }} {{ data.consumption }} {{ data.baseNumber }}</span
          ><span>{{ data.level }}</span></div
        ></template
      >
    </a-tree> -->
    <a-table :columns="columns" :data-source="treeData" :loading="spinning"><a-spin /></a-table>
    <!-- <a-table :columns="columns" :data-source="treeData">
    <template #action>
      <a>Delete</a>
    </template>
    <template #expandedRowRender="{ record }">
      <p style="margin: 0">
        {{ record.description }}
      </p>
    </template>
  </a-table> -->
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { queryBomTreeById } from './../BasMaterialBom.api';
import { useMethods } from '/@/hooks/system/useMethods';
import type { TreeProps } from 'ant-design-vue';

const columns = [
  { title: '阶层', dataIndex: 'level', key: 'level' },
  { title: '料品编号', dataIndex: 'materialCode', key: 'materialCode' },
  { title: '料品名称', dataIndex: 'materialName', key: 'materialName' },
  { title: '用量', dataIndex: 'consumption', key: 'consumption' },
  { title: '底数', dataIndex: 'baseNumber', key: 'baseNumber' }
];
const { handleExportXlsx } = useMethods();
const spinning = ref<boolean>(true);
// const replaceFields = {
//   children: 'children',
//   key: 'id',
//   value: 'id',
//   title: 'str',
// };
// const expandedKeys = ref<string[]>([]);
// const selectedKeys = ref<string[]>([]);
const treeData = ref<TreeProps['treeData']>([]);
let id = '';
//表单赋值
const [registerModal, { setModalProps,closeModal }] = useModalInner(async (data) => {
  //重置表单
  treeData.value = []
  spinning.value = true
  // await reset();
  setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
  const res = await queryBomTreeById({ id: data.id });
  id = data.id;
  // treeData.value = res;
  setList(res);
});
const setList = (res) => {
  res.forEach((item) => {
    item.key = item.id;
    if (item.children.length === 0) {
      delete item.children;
    } else {
      setList(item.children);
    }
  });
  spinning.value = false
  treeData.value = res;
};
const onExportXls = () => {
  handleExportXlsx('BOM树', '/base/materialBom/bom/exportXls', { id });
};
</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-calendar-picker) {
  width: 100%;
}
</style>